<template>
    <div class="user-center">
        <headerCont :page="'login'"/>
        <div class="section">
            <div class="content">
                <div class="left_con">
                    <div class="user">
                        <span>用户中心</span>
                        <b>User center</b>
                    </div>
                    <ul>
                        <li @click="handleClick(index)" v-for="(item, index) in tabList" :key="index">
                            <p>
                                <img :src="index==id?item.img_active:item.img" alt="">
                                <span :class="index==id?'active':''">{{item.title}}</span>
                            </p>
                            <img :src="index==id?item.arrow_active:item.arrow" alt="">
                        </li>
                    </ul>
                </div>
                <div class="right_con">
                    <div class="common_tab update_pwd" v-if="id==0">
                        <div class="cont">
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    已验证手机：
                                </div>
                                <div class="cont_li_input">
                                    <a-input type="text" v-model="update_pwd_mobile" placeholder="请输入手机号" @keyup.enter.native="submit_update_pwd"/>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    图片验证码：
                                </div>
                                <div class="cont_li_input captcha">
                                    <a-input type="text" v-model="update_pwd_gapcode" placeholder="请输入您看到的图片验证码" @keyup.enter.native="submit_update_pwd"/>
                                    <span class="pointer" @click="getrandomImage">
                                        <img :src="result"/>
                                    </span>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    短信验证码：
                                </div>
                                <div class="cont_li_input vercode">
                                    <a-input type="text" v-model="update_pwd_code" placeholder="请输入手机验证码" @keyup.enter.native="submit_update_pwd"/>
                                    <span class="pointer getCodeBtn" id="getCodeBtn_update_pwd" @click="getCode4">获取短信验证码</span>
                                    <span class="downtimecount" id="downtimecount_update_pwd" style="display: none;"></span>
                                </div>
                            </div>
                            <!-- <div class="cont_li">
                                <div class="cont_li_name">
                                    原始密码：
                                </div>
                                <div class="cont_li_input">
                                    <input type="password" v-model="update_pwd_oldpwd" placeholder="请输入密码"/>
                                </div>
                            </div> -->
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    新密码：
                                </div>
                                <div class="cont_li_input">
                                    <a-input type="password" v-model="update_pwd_newpwd" placeholder="请输入密码" @keyup.enter.native="submit_update_pwd"/>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    重复新密码：
                                </div>
                                <div class="cont_li_input">
                                    <a-input type="password" v-model="update_pwd_newpwd1" placeholder="请输入密码" @keyup.enter.native="submit_update_pwd"/>
                                </div>
                            </div>
                        </div>
                        <div class="submit_btn pointer" @click="submit_update_pwd">保存</div>
                        <!-- <a-form layout="inline" @submit="handleSubmit">
                            <a-form-item label="已验证手机：" >
                                <a-input v-model="update_pwd_mobile"/>
                            </a-form-item>
                            <a-form-item label="图片验证码：" >
                                <a-input v-model="update_pwd_gapcode"/>
                                <span class="pointer" @click="getrandomImage">
                                    <img :src="result"/>
                                </span>
                            </a-form-item>
                            <a-form-item label="短信验证码：" >
                                <a-input v-model="update_pwd_code"/>
                                <span @click="getCode4">获取验证码</span>
                            </a-form-item>
                            <a-form-item label="原始密码：" >
                                <a-input type="password" v-model="update_pwd_oldpwd"/>
                            </a-form-item>
                            <a-form-item label="新密码：" >
                                <a-input type="password" v-model="update_pwd_newpwd"/>
                            </a-form-item>
                            <a-form-item label="重复新密码：" >
                                <a-input type="password" v-model="update_pwd_newpwd1"/>
                            </a-form-item>
                            <a-form-item>
                                <a-button type="primary" @click="submit_update_pwd">确定</a-button>
                            </a-form-item>
                        </a-form> -->
                    </div>
                    <div class="common_tab update_tel" v-else-if="id==1">
                        <div class="cont">
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    已验证手机：
                                </div>
                                <div class="cont_li_input">
                                    <a-input type="text" v-model="update_tel_mobile" placeholder="请输入手机号" @keyup.enter.native="submit_update_tel"/>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    填写新手机号：
                                </div>
                                <div class="cont_li_input">
                                    <a-input type="text" v-model="update_tel_mobile1" placeholder="请输入手机号" @keyup.enter.native="submit_update_tel"/>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    当前密码：
                                </div>
                                <div class="cont_li_input">
                                    <a-input type="password" v-model="update_tel_newpwd" placeholder="请输入密码" @keyup.enter.native="submit_update_tel"/>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    图片验证码：
                                </div>
                                <div class="cont_li_input captcha">
                                    <a-input type="text" v-model="update_tel_gapcode" placeholder="请输入您看到的图片验证码" @keyup.enter.native="submit_update_tel"/>
                                    <span class="pointer" @click="getrandomImage">
                                        <img :src="result"/>
                                    </span>
                                </div>
                            </div>
                            <div class="cont_li">
                                <div class="cont_li_name">
                                    短信验证码：
                                </div>
                                <div class="cont_li_input vercode">
                                    <a-input type="text" v-model="update_tel_code" placeholder="请输入手机验证码" @keyup.enter.native="submit_update_tel"/>
                                    <span class="pointer getCodeBtn" id="getCodeBtn_update_tel" @click="getCode3">获取短信验证码</span>
                                    <span class="downtimecount" id="downtimecount_update_tel" style="display: none;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="submit_btn pointer" @click="submit_update_tel">确定</div>
                        <!-- <a-form layout="inline" @submit="handleSubmit">
                            <a-form-item label="已验证手机：" >
                                <a-input v-model="update_tel_mobile"/>
                            </a-form-item>
                            <a-form-item label="填写新手机号：" >
                                <a-input v-model="update_tel_mobile1"/>
                            </a-form-item>
                            <a-form-item label="图片验证码：" >
                                <a-input v-model="update_tel_gapcode"/>
                                <span class="pointer" @click="getrandomImage">
                                    <img :src="result"/>
                                </span>
                            </a-form-item>
                            <a-form-item label="短信验证码：" >
                                <a-input v-model="update_tel_code"/>
                                <span @click="getCode3">获取验证码</span>
                            </a-form-item>
                            <a-form-item>
                                <a-button type="primary" @click="submit_update_tel">确定</a-button>
                            </a-form-item>
                        </a-form> -->
                    </div>
                    <div class="common_tab exit_systerm" v-else-if="id==2" @click="logout_user">
                        <span>退出平台</span>
                    </div>
                    <div class="common_tab help_center" v-else>
                        帮助中心
                    </div>
                </div>
            </div>
        </div>
        <footer-cont></footer-cont>
    </div>
</template>

<script>
import headerCont from "@views/declarationSystem/common/header";
import footerCont from '@/views/declarationSystem/common/footer';
import { 
    randomImage, 
    cxjsb_getYzm,
    cxjsb_ModifyPhoneNumber,
    cxjsb_UserReset,
    logout
} from '@/api/shenbao';
var timer4, curCount4 = 60;
function setCountDown4() {
    if (curCount4 === 0) {
		curCount4 = 60;
        window.clearInterval(timer4);
        document.getElementById('getCodeBtn_update_pwd').style.display="block";
        document.getElementById('downtimecount_update_pwd').style.display="none";
    } else {
        curCount4--;
        document.getElementById('downtimecount_update_pwd').style.display="block";
        document.getElementById('getCodeBtn_update_pwd').style.display="none";
        document.getElementById('downtimecount_update_pwd').innerHTML = "请在"+curCount4+"秒内输入验证码";
    }
}
var timer3, curCount3 = 60;
function setCountDown3() {
    if (curCount3 === 0) {
		curCount3 = 60;
        window.clearInterval(timer3);
        document.getElementById('getCodeBtn_update_tel').style.display="block";
        document.getElementById('downtimecount_update_tel').style.display="none";
    } else {
        curCount3--;
        document.getElementById('downtimecount_update_tel').style.display="block";
        document.getElementById('getCodeBtn_update_tel').style.display="none";
        document.getElementById('downtimecount_update_tel').innerHTML = "请在"+curCount3+"秒内输入验证码";
    }
}
export default {
    components: {
        headerCont,
        footerCont
    },
    data(){
        return {
            id: 0,
            tabList: [{
                title: "密码修改",
                id: 0,
                img: require('@/assets/img/pwd.png'),
                img_active: require('@/assets/img/pwd_active.png'),
                arrow: require('@/assets/img/right.png'),
                arrow_active: require('@/assets/img/right_active.png')
            },{
                title: "注册手机号修改",
                id: 1,
                img: require('@/assets/img/tel.png'),
                img_active: require('@/assets/img/tel_active.png'),
                arrow: require('@/assets/img/right.png'),
                arrow_active: require('@/assets/img/right_active.png')
            },{
                title: "退出平台",
                id: 2,
                img: require('@/assets/img/exit.png'),
                img_active: require('@/assets/img/exit_active.png'),
                arrow: require('@/assets/img/right.png'),
                arrow_active: require('@/assets/img/right_active.png')
            },{
                title: "帮助中心",
                id: 3,
                img: require('@/assets/img/help_center.png'),
                img_active: require('@/assets/img/help_center_active.png'),
                arrow: require('@/assets/img/right.png'),
                arrow_active: require('@/assets/img/right_active.png')
            }],
            key: '',
            result: '',
            update_pwd_mobile: '',
            update_pwd_gapcode: '',
            update_pwd_code: '',
            update_pwd_oldpwd: '',
            update_pwd_newpwd: '',
            update_pwd_newpwd1: '',
            update_tel_mobile: '',
            update_tel_mobile1: '',
            update_tel_newpwd: '',
            update_tel_gapcode: '',
            update_tel_code: '',
            passreg: /^(?=.*[a-zA-Z])(?=.*\d).{8,16}$/,
            reg: /^1[3456789]\d{9}$/,
        }
    },
    methods: {
        handleClick(index){
            this.id = index;
        },
        getrandomImage() {
            let that = this;
            this.key = new Date().getTime();
            randomImage(that.key).then(res=>{
                that.result = res.data.result;
            })
        },
        // type: 1登录，2注册，3忘记密码，4重置密码
        getCode4() {
            let that = this;
            if (!this.update_pwd_mobile) {
                that.$message.warning('请输入手机号');
                return 
            } 
            if(!this.reg.test(this.update_pwd_mobile)) {
                that.$message.warning('手机号格式不正确');
                return 
            }
            if(!this.update_pwd_gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            cxjsb_getYzm({
                code: that.update_pwd_gapcode,
                key: that.key,
                phoneNumber: that.update_pwd_mobile,
                type: 4
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('发送成功');
                    timer4 = window.setInterval(setCountDown4, 1000);
                } else {
                    that.getrandomImage();
                    that.$message.error(res.data.message);
                }
            })  
        },
        getCode3() {
            let that = this;
            if (!this.update_tel_mobile1) {
                that.$message.warning('请输入手机号');
                return 
            } 
            if(!this.reg.test(this.update_tel_mobile1)) {
                that.$message.warning('手机号格式不正确');
                return 
            }
            if(!this.update_tel_gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            cxjsb_getYzm({
                code: that.update_tel_gapcode,
                key: that.key,
                phoneNumber: that.update_tel_mobile1,
                type: 3
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('发送成功');
                    timer3 = window.setInterval(setCountDown3, 1000);
                } else {
                    that.getrandomImage();
                    that.$message.error(res.data.message);
                }
            })  
        },
        submit_update_pwd() {
            let that = this;
            if (!this.update_pwd_mobile) {
                that.$message.warning('请输入手机号');
                return 
            } 
            if(!this.update_pwd_gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            if (!this.update_pwd_code) {
                that.$message.warning('请输入手机验证码');
                return
            }
            if(!this.update_pwd_newpwd) {
                that.$message.warning('请输入新密码');
                return
            }
            if (!this.update_pwd_newpwd1) {
                that.$message.warning('请再次输入密码');
                return
            }
            if (!this.passreg.test(this.update_pwd_newpwd)) {
                that.$message.warning('密码格式不正确');
                return
            }
            if (this.update_pwd_newpwd!=this.update_pwd_newpwd1) {
                that.$message.warning('两次密码输入不一致');
                return
            }
            cxjsb_UserReset({
                code: that.update_pwd_code,
                passWord: that.update_pwd_newpwd, 
                passWord2: that.update_pwd_newpwd, 
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('密码修改成功');
                    window.clearInterval(timer4);
                    sessionStorage.clear();
                    this.$router.replace({
                        path: '/shenbao/login'
                    })
                } else {
        			that.getrandomImage();
                    that.$message.warning(res.data.message);
                }
            })
        },
        submit_update_tel() {
            let that = this;
            if (!this.update_tel_mobile) {
                that.$message.warning('请输入已验证手机号');
                return 
            } 
            if(!this.update_tel_mobile1) {
                that.$message.warning('请输入新手机号');
                return
            }
            if(!this.reg.test(this.update_tel_mobile1)) {
                that.$message.warning('手机号格式不正确');
                return 
            }
            if (!this.update_tel_newpwd) {
                that.$message.warning('请输入当前密码');
                return
            }
            if(!this.update_tel_gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            if (!this.update_tel_code) {
                that.$message.warning('请输入手机验证码');
                return
            }
            cxjsb_ModifyPhoneNumber({
                code: that.update_tel_code,
                passWord: that.update_tel_newpwd, 
                phoneNumber: that.update_tel_mobile1, 
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('手机号修改成功');
                    window.clearInterval(timer3);
                    sessionStorage.clear();
                    this.$router.replace({
                        path: '/shenbao/login'
                    })
                } else {
        			that.getrandomImage();
                    that.$message.warning(res.data.message);
                }
            })
        },
        logout_user() {
            let that = this;
            logout().then(res=>{
                if (res.data.code=='200') {
                    that.$message.success(res.data.message);
                    sessionStorage.clear();
                    that.$router.replace({
                        path: '/shenbao/login'
                    })
                } else {
                    that.$message.success(res.data.message);
                }
            })
        },
    },
    mounted() {
        var islogin = sessionStorage.getItem('islogin');
        if (islogin == '1') {
            var logindata = JSON.parse(sessionStorage.getItem('logindata'));
            this.update_pwd_mobile = logindata.userInfo.userId;
            this.update_tel_mobile = logindata.userInfo.userId;
            this.getrandomImage();
        } else {
            sessionStorage.clear();
            this.$router.replace({
                path: '/shenbao/login'
            })
        }
    }
}
</script>
<style lang="less">
    // .user-center {
    //     .update_pwd {
    //         .ant-form-inline {
    //             margin-top: 20px;
    //             display: flex;
    //             flex-direction: column;
    //             .ant-form-item {
    //                 margin-bottom: 22px;
    //                 display: flex;
    //                 align-items: center;
    //                 button {
    //                     width: 434px;
    //                     height: 54px;
    //                     background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
    //                     border-radius: 5px;
    //                     font-size: 22px;
    //                     font-family: PingFangSC-Regular, PingFang SC;
    //                     font-weight: 400;
    //                     color: #FFFFFF;
    //                     margin-left: 150px;
    //                 }
    //                 .ant-form-item-label {
    //                     width: 150px!important;
    //                     text-align: left;
    //                     label {
    //                         font-size: 18px;
    //                         font-family: PingFangSC-Regular, PingFang SC;
    //                         font-weight: 400;
    //                         color: #333333;
    //                     }
    //                     // background: red;
    //                 }
    //                 .ant-form-item-control-wrapper {
    //                     width: 434px;
    //                     height: 50px;
    //                     margin-left: 10px;
    //                     .ant-form-item-control {
    //                         width: 434px;
    //                         height: 50px;
    //                         input {
    //                             width: 100%;
    //                             height: 100%;
    //                         }
    //                     }
    //                 }
    //                 &:nth-child(2) {

    //                     // width: 434px;
    //                     // height: 50px;
    //                     margin-bottom: 21px;

    //                     .ant-form-item-control-wrapper {

    //                         width: 434px;
    //                         height: 50px;
    //                         .ant-form-item-control {

    //                             width: 434px;
    //                             height: 50px;
    //                             .ant-form-item-children {
    //                                 display: flex;
    //                                 justify-content: space-between;

    //                                 input {
    //                                     width: 293px;
    //                                     height: 50px;
    //                                 }
    //                                 span {
    //                                     cursor: pointer;
    //                                     width: 127px;
    //                                     height: 50px;
    //                                     // border: 1px solid #d9d9d9;
    //                                     text-align: center;
    //                                     line-height: 50px;
    //                                     img {
    //                                         width: 100%;
    //                                         height: 100%;
    //                                         display: block;
    //                                     }
    //                                 }
    //                             }

    //                         }
    //                     }
    //                 }
    //                 &:nth-child(3) {

    //                     // width: 434px;
    //                     // height: 50px;
    //                     margin-bottom: 21px;

    //                     .ant-form-item-control-wrapper {

    //                         width: 434px;
    //                         height: 50px;
    //                         .ant-form-item-control {

    //                             width: 434px;
    //                             height: 50px;
    //                             .ant-form-item-children {
    //                                 position: relative;
    //                                 width: 434px;
    //                                 height: 50px;
    //                                 display: flex;
    //                                 justify-content: space-between;

    //                                 input {
    //                                     width: 434px;
    //                                     height: 50px;
    //                                     padding-right: 120px;
    //                                 }
    //                                 span {
    //                                     cursor: pointer;
    //                                     position: absolute;
    //                                     right: 22px;
    //                                     top: 0;
    //                                     // width: 170px;
    //                                     height: 50px;
    //                                     text-align: center;
    //                                     line-height: 50px;
    //                                     font-size: 18px;
    //                                     font-family: PingFangSC-Regular, PingFang SC;
    //                                     font-weight: 400;
    //                                     color: #006DC0;
    //                                 }
    //                             }

    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    //     .update_tel {
    //         .ant-form-inline {
    //             margin-top: 20px;
    //             display: flex;
    //             flex-direction: column;
    //             .ant-form-item {
    //                 margin-bottom: 22px;
    //                 display: flex;
    //                 align-items: center;
    //                 button {
    //                     width: 434px;
    //                     height: 54px;
    //                     background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
    //                     border-radius: 5px;
    //                     font-size: 22px;
    //                     font-family: PingFangSC-Regular, PingFang SC;
    //                     font-weight: 400;
    //                     color: #FFFFFF;
    //                     margin-left: 150px;
    //                 }
    //                 .ant-form-item-label {
    //                     width: 150px!important;
    //                     text-align: left;
    //                     label {
    //                         font-size: 18px;
    //                         font-family: PingFangSC-Regular, PingFang SC;
    //                         font-weight: 400;
    //                         color: #333333;
    //                     }
    //                     // background: red;
    //                 }
    //                 .ant-form-item-control-wrapper {
    //                     width: 434px;
    //                     height: 50px;
    //                     margin-left: 10px;
    //                     .ant-form-item-control {
    //                         width: 434px;
    //                         height: 50px;
    //                         input {
    //                             width: 100%;
    //                             height: 100%;
    //                         }
    //                     }
    //                 }
    //                 &:nth-child(3) {
    //                     margin-bottom: 21px;

    //                     .ant-form-item-control-wrapper {

    //                         width: 434px;
    //                         height: 50px;
    //                         .ant-form-item-control {

    //                             width: 434px;
    //                             height: 50px;
    //                             .ant-form-item-children {
    //                                 display: flex;
    //                                 justify-content: space-between;

    //                                 input {
    //                                     width: 293px;
    //                                     height: 50px;
    //                                 }
    //                                 span {
    //                                     cursor: pointer;
    //                                     width: 127px;
    //                                     height: 50px;
    //                                     text-align: center;
    //                                     line-height: 50px;
    //                                     img {
    //                                         width: 100%;
    //                                         height: 100%;
    //                                         display: block;
    //                                     }
    //                                 }
    //                             }

    //                         }
    //                     }
    //                 }
    //                 &:nth-child(4) {

    //                     // width: 434px;
    //                     // height: 50px;
    //                     margin-bottom: 21px;

    //                     .ant-form-item-control-wrapper {

    //                         width: 434px;
    //                         height: 50px;
    //                         .ant-form-item-control {

    //                             width: 434px;
    //                             height: 50px;
    //                             .ant-form-item-children {
    //                                 position: relative;
    //                                 width: 434px;
    //                                 height: 50px;
    //                                 display: flex;
    //                                 justify-content: space-between;

    //                                 input {
    //                                     width: 434px;
    //                                     height: 50px;
    //                                     padding-right: 120px;
    //                                 }
    //                                 span {
    //                                     cursor: pointer;
    //                                     position: absolute;
    //                                     right: 22px;
    //                                     top: 0;
    //                                     // width: 170px;
    //                                     height: 50px;
    //                                     text-align: center;
    //                                     line-height: 50px;
    //                                     font-size: 18px;
    //                                     font-family: PingFangSC-Regular, PingFang SC;
    //                                     font-weight: 400;
    //                                     color: #006DC0;
    //                                 }
    //                             }

    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }

    // }
</style>
<style scoped lang='less'>
.user-center {
    width: 100%;
    background: #F7F7F7;
    .section {
        margin-top: 20px;
        height: 600px;
        .content {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            background: #FFFFFF;
            display: flex;
            .left_con {
                width: 220px;
                height: 100%;
                background: #FAFAFB;
                .user {
                    width: 220px;
                    height: 97px;
                    // background: red;
                    background: url('../../../assets/img/user_center_bg.png');
                    background-size: 100%;
                    border-radius: 2px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    span {
                        font-size: 30px;
                        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 42px;
                    }
                    b {
                        font-size: 20px;
                        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                        color: #FFFFFF;
                        line-height: 28px;
                    }
                }
                ul {
                    display: flex;
                    flex-direction: column;
                    margin-top: 21px;
                    li {
                        margin-bottom: 40px;
                        padding: 0 26px 0 28px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                        p {
                            margin-bottom: 0;
                            span {
                                font-size: 16px;
                                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                                font-weight: 400;
                                color: #333333;
                                line-height: 22px;
                                margin-left: 8px;
                                &.active {
                                    color: #3388EE;
                                }
                            }
                        }
                        &>img {
                            display: inlin-block;
                            width: 8px;
                            height: 13px;
                        }
                        &:nth-child(1) {
                            p {
                                img {
                                     display: inlin-block;
                                    width: 16px;                            
                                    height: 18.91px;
                                }
                            }
                        }
                        &:nth-child(2) {
                            p {
                                img {
                                     display: inlin-block;
                                    width: 15px;                            
                                    height: 20px;
                                }
                            }
                        }
                        &:nth-child(3) {
                            p {
                                img {
                                     display: inlin-block;
                                    width: 16px;                            
                                    height: 17.11px;
                                }
                            }
                        }
                        &:nth-child(4) {
                            p {
                                img {
                                     display: inlin-block;
                                    width: 19px;                            
                                    height: 19px;
                                }
                            }
                        }
                    }
                }
            }
            .right_con {
                width: 980px;
                height: 100%;
                padding-top: 65px;
                padding-left: 50px;
                // background: purple;
            }
        }
    }

}
.cont {
    .cont_li {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .cont_li_name {
            font-size: 18px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
            color: #333333;
            min-width: 140px;
            text-align: right;
            span {
                color: #F10505;
                font-size: 18px;
                margin-right: 6px;
            }
        }
        .cont_li_input {
            margin-left: 10px;
            input {
                width: 434px;
                height: 50px;
                border-radius: 4px;
                border: 1px solid #ECEBEB;
                text-indent: 1em;
            }
            &.captcha {
                width: 434px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                input {
                    width: 293px;
                }
                span {
                    width: 127px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            &.vercode {
                position: relative;
                span {
                    position: absolute;
                    right: 22px;
                    top:13px;
                    font-size: 18px;
                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                    font-weight: 400;
                    color: #006DC0;
                    &.downtimecount {
                        color: #999;
                    }
                }
            }
        }
    }
}
.submit_btn {
    width: 434px;
    height: 54px;
    background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
    border-radius: 5px;
    font-size: 22px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 54px;
    margin-top: 40px;
    margin-left: 150px;
}
.exit_systerm {
    width: 434px;
    height: 54px;
    background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
    border-radius: 5px;
    font-size: 22px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 54px;
    margin-top: 40px;
    margin-left: 150px;
}
</style>
